<template>
  <div id="viewQuestionView">
    <a-row :gutter="[24, 24]">
      <a-col :md="12" :xs="24">
        <template v-if="checkPage">
          <a-card title="提交详情" v-if="questionSubmit">
            <a-descriptions :column="1">
              <a-descriptions-item label="Run ID">{{
                questionSubmit.id
              }}</a-descriptions-item>
              <a-descriptions-item label="用户ID">{{
                questionSubmit.userId
              }}</a-descriptions-item>
              <a-descriptions-item label="用户名">{{
                questionSubmit.username
              }}</a-descriptions-item>
              <a-descriptions-item label="题目ID">{{
                questionSubmit.questionId
              }}</a-descriptions-item>
              <a-descriptions-item label="语言">{{
                questionSubmit.language
              }}</a-descriptions-item>
              <a-descriptions-item label="判题结果">{{
                questionSubmit.judgeResult
              }}</a-descriptions-item>
              <a-descriptions-item label="判题信息">
                <pre style="white-space: pre-wrap; word-break: break-all">{{
                  questionSubmit.judgeInfo
                    ? JSON.stringify(questionSubmit.judgeInfo, null, 2)
                    : "无"
                }}</pre>
              </a-descriptions-item>
              <a-descriptions-item label="提交状态">{{
                questionSubmit.status
              }}</a-descriptions-item>
              <a-descriptions-item label="提交时间">{{
                questionSubmit.createTime
              }}</a-descriptions-item>
            </a-descriptions>
            <a-divider />
            <div>
              <span style="font-weight: bold">提交代码：</span>
              <CodeEditor
                :value="questionSubmit.code || ''"
                :language="questionSubmit.language"
                :disabled="true"
              />
            </div>
          </a-card>
        </template>
        <template v-else>
          <a-tabs default-active-key="question">
            <a-tab-pane key="question" title="Question">
              <a-card v-if="question" :title="question.title">
                <a-descriptions
                  title="判题条件"
                  :column="{ xs: 1, md: 2, lg: 3 }"
                >
                  <a-descriptions-item label="时间限制">
                    {{ question.judgeConfig?.timeLimit ?? 0 }}
                  </a-descriptions-item>
                  <a-descriptions-item label="内存限制">
                    {{ question.judgeConfig?.memoryLimit ?? 0 }}
                  </a-descriptions-item>
                  <a-descriptions-item label="堆栈限制">
                    {{ question.judgeConfig?.stackLimit ?? 0 }}
                  </a-descriptions-item>
                </a-descriptions>
                <MdViewer :value="question.content || ''" />
                <template #extra>
                  <a-space wrap>
                    <a-tag
                      v-for="(tag, index) of question.tags"
                      :key="index"
                      color="green"
                      >{{ tag }}
                    </a-tag>
                  </a-space>
                </template>
              </a-card>
            </a-tab-pane>
            <a-tab-pane key="comment" title="Tips" disabled> 评论区</a-tab-pane>
            <a-tab-pane key="answer" title="Answer">
              <!-- <a-card v-if="question" :title="question.title">
                <MdViewer :value="question.content || ''" /> </a-card
            > -->
            </a-tab-pane>
          </a-tabs>
        </template>
        <a-tabs default-active-key="question">
          <a-tab-pane key="question" title="Question">
            <a-card v-if="question" :title="question.title">
              <a-descriptions
                title="判题条件"
                :column="{ xs: 1, md: 2, lg: 3 }"
              >
                <a-descriptions-item label="时间限制">
                  {{ question.judgeConfig.timeLimit ?? 0 }}
                </a-descriptions-item>
                <a-descriptions-item label="内存限制">
                  {{ question.judgeConfig.memoryLimit ?? 0 }}
                </a-descriptions-item>
                <!-- <a-descriptions-item label="堆栈限制">
                  {{ question.judgeConfig.stackLimit ?? 0 }}
                </a-descriptions-item> -->
              </a-descriptions>
              <MdViewer :value="question.content || ''" />
              <template #extra>
                <a-space wrap>
                  <a-tag
                    v-for="(tag, index) of question.tags"
                    :key="index"
                    color="green"
                    >{{ tag }}
                  </a-tag>
                </a-space>
              </template>
            </a-card>
          </a-tab-pane>
          <a-tab-pane key="comment" title="Tips" disabled> 评论区</a-tab-pane>
          <a-tab-pane key="answer" title="Answer">
            <a-card v-if="question" :title="question.title">
              <MdViewer :value="question.content || ''" /> </a-card
          ></a-tab-pane>
        </a-tabs>
      </a-col>
      <a-col :md="12" :xs="24" v-if="!checkPage">
        <a-form :model="form" layout="inline">
          <a-form-item
            field="language"
            label="Language"
            style="min-width: 240px"
          >
            <a-select
              v-model="form.language"
              :style="{ width: '320px' }"
              placeholder="选择编程语言"
            >
              <a-option>JAVA</a-option>
              <a-option>C</a-option>
              <a-option>CPP</a-option>
              <a-option>PYTHON</a-option>
            </a-select>
          </a-form-item>
        </a-form>
        <CodeEditor
          :disabled="checkPage"
          :value="form.code as string"
          :language="form.language"
          :handle-change="changeCode"
        />
        <a-divider size="0" />
        <a-button type="primary" style="min-width: 200px" @click="doSubmit">
          Submit
        </a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watchEffect, withDefaults, defineProps } from "vue";
import message from "@arco-design/web-vue/es/message";
import CodeEditor from "@/components/CodeEditor.vue";
import MdViewer from "@/components/MdViewer.vue";
import {
  QuestionControllerService,
  QuestionSubmitAddRequest,
  QuestionVO,
  QuestionSubmitVO,
  QuestionSubmitControllerService,
} from "../../generated";
import { useRoute } from "vue-router/dist/vue-router";

const route = useRoute();
// 如果页面地址包含 check，视为查看页面
const checkPage = route.path.includes("check");

interface Props {
  id: string;
}

const props = withDefaults(defineProps<Props>(), {
  id: () => "",
});

const question = ref<QuestionVO>();
const questionSubmit = ref<QuestionSubmitVO>();

const loadData = async () => {
  if (checkPage) {
    // check模式下，id为提交id，拉取提交详情
    const res =
      await QuestionSubmitControllerService.getQuestionSubmitVOByIdUsingGet(
        Number(props.id)
      );
    if (res.code === 0) {
      questionSubmit.value = res.data;
    } else {
      message.error("加载提交详情失败，" + res.message);
    }
  } else {
    // 普通模式下，id为题目id，拉取题目信息
    const res = await QuestionControllerService.getQuestionVoByIdUsingGet(
      props.id as any
    );
    if (res.code === 0) {
      question.value = res.data;
    } else {
      message.error("加载失败，" + res.message);
    }
  }
};

const form = ref<QuestionSubmitAddRequest>({
  language: "JAVA",
  code: localStorage.getItem(props.id),
});

/**
 * 提交代码
 */

const doSubmit = async () => {
  localStorage.setItem(props.id, form.value.code as string);
  if (!question.value?.id) {
    return;
  }

  const res = await QuestionControllerService.doQuestionSubmitUsingPost({
    ...form.value,
    questionId: question.value.id,
  });
  if (res.code === 0) {
    message.success("提交成功");
  } else {
    message.error("提交失败," + res.message);
  }
};

/**
 * 页面加载时，请求数据
 */
onMounted(() => {
  console.log(111);

  loadData();
  if (checkPage) {
    form.value.code = localStorage.getItem(props.id);
  }
});

const changeCode = (value: string) => {
  form.value.code = value;
};
</script>

<style>
#viewQuestionView {
  max-width: 1400px;
  margin: 0 auto;
}

#viewQuestionView .arco-space-horizontal .arco-space-item {
  margin-bottom: 0 !important;
}
</style>
